<template>
    <div>
        <div class="box">
            <h1>
                <p>111</p>
            </h1>
            <p>p1</p>
        </div>
        <div class="box1">我是box1</div>

        <ul>
            <li>
                111111
            </li>
            <li>
                2222222
            </li>
            <li>
                3333333333
            </li>
        </ul>

        <!--  -->
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {

        };
    },


}

</script>
<style lang="scss" scoped>
@import '../assets/reset.scss';
/*
01:定义变量
$变量名: 值;


02:嵌套样式 

03:
& 用法: 表示上一层的父级标签


04: 引入其他的scss 文件
@import 文件地址


05: 函数调用 (有参和无参)

*/

$w: 100px;
$h: 200px;
$bgRed: red;
$bd2: 2px solid green;

/* 定义函数-不带参数的函数 */
@mixin commonCss {
    width: $w;
    height: $h;
    background-color: $bgRed;
    border: $bd2;
    margin: 10px
}

@mixin commonCss1 ($a, $b, $c, $d) {
    width: $a;
    height: $b;
    background-color: $c;
    border: $d;
    margin: 10px
}

.box {
    width: $w;
    height: $h;
    background-color: $bgRed;
    font-size: 30px;

    h1 {
        p {
            font-size: 100px;
        }
    }

    p {
        margin: 50px;
        color: deeppink;
    }
}

ul {
    li {
        &:hover {
            background-color: red;
        }
    }
}

.box1 {
    border: $bd2 ;
}

.box2 {
    @include commonCss;

}

.box3 {
    @include commonCss
}

.box4 {
    @include commonCss1(300px, 300px, yellow, $bd2)
}
</style>